<script >
import Bread from "@/pages/Search/Bread/index.vue";
import Selector from "@/pages/Search/Selector/index.vue";
import Details from "@/pages/Search/Details/index.vue";
import HotSale from "@/pages/Search/HotSale/index.vue";

export default {
    name: "Search",
    components: {HotSale, Details, Selector, Bread},
    watch:{
        "$route.query":{
            handler(){
                const query = {...this.$route.query};
                // query.props是一个字符串，那么将其转为数组
                if(query.props && typeof query.props === "string"){
                    query.props = [query.props];
                }
                this.$store.dispatch("product/getSearchResultAsync",{
                    ...query,
                    order:"1:desc",
                    pageSize:10
                })
            },
            immediate:true
        }
    }
}
</script>

<template>
    <div>
        <div class="main">
            <div class="py-container">
                <!--bread-->
                <Bread></Bread>
                <!--selector-->
                <Selector></Selector>
                <!--details-->
                <Details></Details>
                <!--hotsale-->
                <HotSale></HotSale>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.py-container{
    width: 1200px;
    margin: 10px auto;

}
</style>